<template>
	<view class="content">
		<!-- <image mode="widthFix" src="/static/logo2.png" class="swiperLogo"></image> -->
		<view class="uni-margin-wrap">
			<view class="search flex align">
				<view class="address">
					<!-- <view class="addressName">高新区</view> -->
					<!-- <view class="time">
						{{time}}
					</view> -->
					<view v-if="weather!=''||time!=''">{{time}} {{weather.weather}} {{weather.temperature}}℃</view>
					<!-- <view>{{time}} 多云 30℃</view> -->
					<!-- <view>乐游高新，不虚此行</view> -->
				</view>
			</view>
			<swiper class="swiper" circular indicator-active-color="#fff" :indicator-dots="indicatorDots"
				:autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view style="position: relative;width: 100%;height: 100%;">
						<image :src="item.path" mode="aspectFill" @click="toUrl(item.url,item.path)"></image>
						<view class="swiper-title flex align">
							<!-- <u-icon name="map-fill" color="#fff"></u-icon> -->
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="navView">
			<view class="navs flex align wrap">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="toUrl(item.url)">
					<image :src="item.path" :class="index==4||index==5||index==6||index==7?'image':''"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="video" style="height: 400rpx;position: relative;">
			<view class="videoTab">精品视频</view>
			<swiper class="swiper2" circular vertical indicator-active-color="#fff" :autoplay="autoplay"
				:interval="interval" :duration="500">
				<swiper-item v-for="(item,index) in srcList" :key="index">
					<view style="width: 100%;height: 100%;position: relative;">
						<!-- <video :src="item.src[1]" :poster="item.src[0]" style="object-fit: cover;"></video> -->
						<image :src="item.src[0]" style="border-radius: 20rpx;" class="img" mode="aspectFill"
							@click="toShow(item.src[1])"></image>
						<view class="img-name"
							style="position: absolute;bottom: 0;left: 0;color: white;padding: 20rpx;font-size: 28rpx;font-weight: bold;">
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="video" v-if="srcList.length!=0">
				<smm-video poster="https://gxtravel.ncscloudmedia.com/uploads/png/20250701/8d1fb175e2f7c619f02b29490ce731b5.png" :srcList="srcList" :isDirectory="false" :isDanmu.sync="isdanmu" :isDanmuBtn="isdanmuBtn"
					:danmuList='danmuList'></smm-video>
		</view> -->
		<!-- 推荐 -->
		<view class="main-list">
			<image class="list-bg" src="/static/index/bg3.png"></image>
			<view class="list-tit">
				<image mode="widthFix" src="/static/index/bg1.png"></image>
				<view>景点推荐</view>
			</view>
			<view class="jingdian flex align between">
				<view class="jing1">
					<view class="jing-name" style="z-index: 2;">白鹤小镇</view>
					<swiper class="swiper2" circular vertical indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="1200">
						<swiper-item v-for="(item,index) in scenicList1" :key="index">
							<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="jing2">
					<view class="jing2-list">
						<view class="jing-name" style="z-index: 2;">嘻街</view>
						<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
							:interval="interval" :duration="1000">
							<swiper-item v-for="(item,index) in scenicList2" :key="index">
								<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="jing2-list">
						<view class="jing-name" style="z-index: 2;">图书馆</view>
						<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
							:interval="interval" :duration="1100">
							<swiper-item v-for="(item,index) in scenicList3" :key="index">
								<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="jingdain flex align between jingdain2">
				<view class="jing1">
					<view class="jing-name" style="z-index: 2;">美书馆</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="700">
						<swiper-item v-for="(item,index) in scenicList6" :key="index">
							<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="jing1">
					<view class="jing-name" style="z-index: 2;">美术馆</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="600">
						<swiper-item v-for="(item,index) in scenicList4" :key="index">
							<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="list-tit" style="margin-top: 40rpx;">
				<image mode="widthFix" src="/static/index/bg1.png"></image>
				<view>美食推荐</view>
			</view>
			<view class="jingdian flex align between">
				<view class="jing1" @click="toUrl('/pages/restaurant/restaurant?currentIndex=1&category_id=1')">
					<view class="jing-name" style="z-index: 2;">艾溪嘻街</view>
					<swiper class="swiper2" circular vertical indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="1200">
						<swiper-item v-for="(item,index) in foodList1" :key="index">
							<image :src="item.path" class="img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="jing2">
					<view class="jing2-list"
						@click="toUrl('/pages/restaurant/restaurant?currentIndex=2&category_id=2')">
						<view class="jing-name" style="z-index: 2;font-size:26rpx">高处见</view>
						<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
							:interval="interval" :duration="1000">
							<swiper-item v-for="(item,index) in foodList2" :key="index">
								<image :src="item.path" class="img" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="jing2-list"
						@click="toUrl('/pages/restaurant/restaurant?currentIndex=3&category_id=9')">
						<view class="jing-name" style="z-index: 2;">凤凰仓</view>
						<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
							:interval="interval" :duration="1100">
							<swiper-item v-for="(item,index) in foodList3" :key="index">
								<image :src="item.path" class="img" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="jingdain flex align between jingdain2">
				<view class="jing1" @click="toUrl('/pages/restaurant/restaurant?currentIndex=4&category_id=10')">
					<view class="jing-name" style="z-index: 2;">玫瑰城文化艺术街区</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="700">
						<swiper-item v-for="(item,index) in foodList4" :key="index">
							<image :src="item.path" class="img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="jing1" @click="toUrl('/pages/restaurant/restaurant?currentIndex=5&category_id=12')">
					<view class="jing-name" style="z-index: 2;">寻味鲤鱼洲</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="600">
						<swiper-item v-for="(item,index) in foodList5" :key="index">
							<image :src="item.path" class="img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 	<view class="jingdain flex align between jingdain2">
				<view class="jing1">
					<view class="jing-name" style="z-index: 2;">今日宜</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="700">
						<swiper-item v-for="(item,index) in foodList6" :key="index">
							<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="jing1">
					<view class="jing-name" style="z-index: 2;">star 青春市集</view>
					<swiper class="swiper2" circular indicator-active-color="#fff" :autoplay="autoplay"
						:interval="interval" :duration="600">
						<swiper-item v-for="(item,index) in foodList7" :key="index">
							<image :src="item.path" class="img" mode="aspectFill" @click="toUrl(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
			<view class="list-tit" style="margin-top: 40rpx;">
				<image mode="widthFix" src="/static/index/bg1.png"></image>
				<view>活动推荐</view>
			</view>
			<view class="zixunList">
				<other-page></other-page>
			</view>
			<!-- 资讯 -->
			<!-- <view class="zixunNav flex align" style="position: relative;">
				<view class="list-tit list-tit3">
					<image mode="widthFix" src="/static/index/bg1.png"></image>
					<view>【精彩活动回顾】</view>
				</view>
				<navigator url="/pages/news/news?name=精彩回顾" hover-class="none" class="more flex"
					style="position: absolute;right:0;color: grey;">更多<u-icon name="arrow-right"></u-icon></navigator>
			</view>
			<view class="zixunList">
				<navigator :url="'/pages/news/detail?id='+item.id" hover-class="none" class="bookList"
					v-for="(item,index) in articleList" :key="index">
					<image :src="item.cover" mode="aspectFill"></image>
					<view style="width: fit-content;">{{item.title}}</view>
				</navigator>
				<xw-empty :isShow="articleList.length==0" text="暂无数据" textColor="#777777"></xw-empty>
			</view> -->
			<view class="zixunNav">
				<view :class="act2==2?'list-tit':'list-tit3'" @click="toAct2(2)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==2"></image>
					<view>路线推荐</view>
				</view>
				<!-- 	<view v-for="(item,index) in routeList" :key="index"
					:class="act2==item.id?'list-tit list-tit2':'list-tit2'" @click="toAct2(item.id)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==item.id"></image>
					<view>{{item.name}}</view>
				</view> -->
				<!-- <view :class="act2==3?'list-tit list-tit2':'list-tit2'" @click="toAct2(3)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==3"></image>
					<view>生态之旅</view>
				</view>
				<view :class="act2==4?'list-tit list-tit2':'list-tit2'" @click="toAct2(4)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==4"></image>
					<view>康养之旅</view>
				</view>
				<view :class="act2==5?'list-tit list-tit2':'list-tit2'" @click="toAct2(5)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==5"></image>
					<view>科技之旅</view>
				</view>
				<view :class="act2==6?'list-tit list-tit2':'list-tit2'" @click="toAct2(6)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==6"></image>
					<view>观鸟之旅</view>
				</view>
				<view :class="act2==7?'list-tit list-tit2':'list-tit2'" @click="toAct2(7)">
					<image mode="widthFix" src="/static/index/bg1.png" v-if="act2==7"></image>
					<view>历史人文之旅</view>
				</view> -->
			</view>
			<view class="gonglue flex between wrap">
				<navigator :url="'/pages/route/detail?id='+item.id" hover-class="none" class="gongList"
					v-for="(item,index) in list" :key="index">
					<view class="image">
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="infos">
						<view class="title flex align">
							<u-icon name="map-fill"></u-icon>
							<view>{{item.address}}</view>

						</view>
						<view class="flex align between eye">
							<view class="eye-item flex align">
							</view>
							<view class="eye-item flex align">
								<u-icon name="eye-fill"></u-icon>
								<!-- <image src="/static/index/eye.png"></image> -->
								<view>{{item.pv}}</view>
							</view>

						</view>
					</view>
				</navigator>
			</view>
			<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>

		</view>
		<!-- 底部导航 -->
		<view class="btom-view">
			<image src="/static/nav/btom1.png" class="btom-bg"></image>
			<!-- <view class="btom-black"></view> -->
			<view class="bto-item bto-item-a">
				<image src="/static/nav/nav1-a.png"></image>
				<view>首页</view>
			</view>
			<view class="bto-item bto-item2" @click="toUrl('/pages/map/map')">
				<image src="/static/nav/nav2.png"></image>
				<view>文旅地图</view>
			</view>
			<view class="bto-item bto-item3" @click="toUrl('/pages/mine/mine')">
				<image src="/static/nav/nav3.png"></image>
				<view>我的</view>
			</view>
		</view>
		<u-popup :show="showVideo" mode="center" @close="close" :closeable="true">
			<view style="width: 700rpx;">
				<video style="width: 100%;" :src="'https://gxtravel.ncscloudmedia.com/'+video" controls
					id="myVideo"></video>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		positionList,
		articleList,
		scenicCategory,
		scenicList,
		positionDetail,
		wechatLogin,
		userDetail,
		config
	} from '@/api/apiData.js';
	import swiperTab from "@/components/swiperTab/swiperTab.vue";
	import OtherPage from '@/pages/other-page/other-page.vue'
	export default {
		components: {
			swiperTab,
			OtherPage
		},
		data() {
			return {
				video: '',
				muted: false,
				act: 2,
				act2: 2,
				keyword: '',
				text1: '南昌市高新区欢迎您南昌市高新区欢迎您',
				title: 'Hello',
				indicatorDots: true,
				autoplay: true,
				interval: 3050,
				duration: 500,
				scrollList: [{
					imgurl: '/static/banner.png',
					name: '高新区图书馆'
				}, {
					imgurl: '/static/banner2.png',
					name: '高新区图书馆2'
				}, {
					imgurl: '/static/banner.png',
					name: '高新区图书馆3'
				}],
				navList: [],
				videoContext: null,
				video: false,
				bannerList: [],
				scenicList1: [],
				scenicList2: [],
				scenicList3: [],
				scenicList4: [],
				scenicList5: [],
				scenicList6: [],
				foodList1: [],
				foodList2: [],
				foodList3: [],
				foodList4: [],
				foodList5: [],
				foodList6: [],
				foodList7: [],
				articleList: [],
				totalPage: 1,
				page: 0,
				offset: 20,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				category_id: 2,
				routeList: [],
				videoPath: '',
				info: '',
				weather: '',
				appid: '',
				srcList: [],
				isdanmu: false,
				isdanmuBtn: false,
				danmuList: [{
						text: '没有弹幕？',
						color: '#ffffff',
						time: 1
					},
					{
						text: '呜呜呜',
						color: '#ffffff',
						time: 3
					}
				],
				showVideo: false,
				time: ''
			}
		},
		onLoad() {
			this.getlist()
			const type = uni.getSystemInfoSync().uniPlatform
			if (type == 'mp-weixin') {
				console.log('在小程序内');
			} else {
				this.getInfo()
				// this.checkWeChatCode()
			}

		},
		mounted() {
			// var timer = setInterval(() => {
			this.getNowTime()
			// }, 1000)
			this.getBanner()
			// this.scenicCategory()
		},
		// 组件销毁时关闭定时器
		beforeDestroy() {
			clearInterval(timer)
		},
		// onPageScroll(e) {
		// 	const that = this;
		// 	that.scrollTop = e.scrollTop;
		// },
		// onReachBottom() {
		// 	const that = this;
		// 	that.getlist();
		// },
		onReady() {

		},
		methods: {
			//获取当前时间
			getNowTime() {
				var date = new Date();
				//年 getFullYear()：四位数字返回年份
				var year = date.getFullYear(); //getFullYear()代替getYear()
				//月 getMonth()：0 ~ 11
				var month = date.getMonth() + 1;
				//日 getDate()：(1 ~ 31)
				var day = date.getDate();
				//时 getHours()：(0 ~ 23)
				var hour = date.getHours();
				//分 getMinutes()： (0 ~ 59)
				var minute = date.getMinutes();
				//秒 getSeconds()：(0 ~ 59)
				var second = date.getSeconds();
				// var time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ":" +
				// 	this.addZero(minute) + ':' + this.addZero(second);
				var time = this.addZero(month) + '-' + this.addZero(day);
				this.time = time
			},
			//小于10的拼接上0字符串
			addZero(s) {
				return s < 10 ? ('0' + s) : s;
			},
			close() {
				this.showVideo = false
				// console.log('close');
			},
			toShow(v) {
				this.showVideo = true
				this.video = v
				setTimeout(() => {
					const video = uni.createVideoContext('myVideo');
					video.play();
				}, 500)
			},
			async getConfig() {
				const result = await config()
				if (result.code == 1) {
					this.appid = result.data.appId
					this.checkWeChatCode()
				} else {

				}
			},
			// 获取天气
			getWeather(loc) {
				let that = this
				that.$jsonp('https://apis.map.qq.com/ws/weather/v1/', {
					key: "F2GBZ-2II6X-EQB4R-7MYZJ-K3S3E-KKBNB",
					location: '28.694426,115.975846',
					output: 'jsonp'
				}).then(res => {
					if (res.result.realtime) {
						that.weather = res.result.realtime[0].infos
					}
				}).catch(err => {
					console.log(err);
				});

				// uni.request({
				// 	url: 'https://apis.map.qq.com/ws/weather/v1/', //仅为示例，并非真实接口地址。
				// 	data: {
				// 		adcode: 130681,
				// 		key: "F2GBZ-2II6X-EQB4R-7MYZJ-K3S3E-KKBNB",
				// 	},
				// 	success: (response) => {
				// 		console.log(response)
				// 	}
				// });
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					// this.wxLogin()
					this.getConfig()
				} else if (result.code == 1) {
					this.info = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" + local + "#wechat_redirect"
				console.log(href)
				window.location.href = href
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				} else {
					this.wxLogin()
					// this.getInfo()
				}
			},
			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			async getOpenidAndUserinfo(code) {
				this.show = true
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
					// window.location.replace(
					// 	"https://gxtravel.ncscloudmedia.com/h5/#/"
					// );
				}
			},
			async getBanner() {
				const result = await positionList({
					position_id: 1
				})

				if (result.code == 1) {
					this.bannerList = result.data
					this.getNav()

				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}

			},
			async getNav() {
				const result = await positionList({
					position_id: 5
				})
				if (result.code == 1) {
					this.navList = result.data
					const result2 = await positionList({
						position_id: 14
					})
					if (result2.code == 1) {
						result2.data.forEach(item => {
							item.src = item.path.split(',')
							item.name = item.title
						})
						this.srcList = result2.data
						this.getWeather()
						this.getScenic()
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'error'
						});
					}
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getScenic() {
				const result1 = await positionList({
					position_id: 6
				})
				if (result1.code == 1) {
					this.scenicList1 = result1.data
					const result2 = await positionList({
						position_id: 7
					})
					if (result2.code == 1) {
						this.scenicList2 = result2.data
						const result3 = await positionList({
							position_id: 8
						})
						if (result3.code == 1) {
							this.scenicList3 = result3.data
							const result4 = await positionList({
								position_id: 9
							})
							if (result4.code == 1) {
								this.scenicList4 = result4.data
								const result5 = await positionList({
									position_id: 10
								})
								if (result5.code == 1) {
									this.scenicList5 = result5.data
									const result6 = await positionList({
										position_id: 18
									})
									if (result6.code == 1) {
										this.scenicList6 = result6.data
										const food1 = await positionList({
											position_id: 21
										})
										if (food1.code == 1) {
											this.foodList1 = food1.data
											const food2 = await positionList({
												position_id: 22
											})
											if (food2.code == 1) {
												this.foodList2 = food2.data
												const food3 = await positionList({
													position_id: 23
												})
												if (food3.code == 1) {
													this.foodList3 = food3.data
													const food4 = await positionList({
														position_id: 24
													})
													if (food4.code == 1) {
														this.foodList4 = food4.data
														const food5 = await positionList({
															position_id: 25
														})
														if (food5.code == 1) {
															this.foodList5 = food5.data
															// this.getArticle()
															// const food6 = await positionList({
															// 	position_id: 26
															// })
															// if (food6.code == 1) {
															// 	this.foodList6 = food6.data
															// 	const food7 = await positionList({
															// 		position_id: 27
															// 	})
															// 	if (food7.code == 1) {
															// 		this.foodList7 = food7.data
															// 		this.getArticle()
															// 	}
															// }
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}












			},
			async getArticle() {
				const result = await articleList({
					channel_id: 2
				})
				if (result.code == 1) {
					this.articleList = result.data.list
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			toWei() {
				wx.miniProgram.openLaunchWeApp({
					appId: 'wxeea05d105d34428b', // 小程序原始id
					path: 'pages/index/index', // 打开的页面路径，如果为空则打开首页
					success(res) {
						// 打开成功
					},
					fail(res) {
						// 打开失败
					}
				});
				// uni.navigateToMiniProgram({
				// 	appId:'wxeea05d105d34428b',
				// 	path:'pages/index/index',
				// 	success(res) {
				// 		console.log(res)
				// 	},
				// 	fail(res) {
				// 		console.log(res)
				// 	}
				// })
			},
			toMuted() {
				const video = uni.createVideoContext('myVideo', this);
				this.muted = !this.muted; // 切换静音状态
				video.muted = this.muted; // 设置视频为静音或取消静音
			},
			toPlay2() {
				const video = this.$refs.myVideo;
				video.play();
			},
			toPlay() {
				const video = this.$refs.myVideo;
				if (video.playing) {
					video.pause();
				} else {
					video.play();
				}
			},
			toUrl(u, img) {
				if (u == '') {
					uni.previewImage({
						urls: [img],
						current: img
					})

				} else {
					uni.navigateTo({
						url: u
					})
				}
			},
			toAct(e) {
				console.log(e)
				this.act = e
				this.getArticle()
			},
			toAct2(e) {
				console.log(e)
				this.act2 = e
				this.list = []
				this.page = 0
				this.getlist()
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					act2,
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					category_id: act2
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await scenicList(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
			async scenicCategory() {
				const result = await scenicCategory({
					parent_id: 2
				})
				if (result.code == 1) {
					console.log(result.data)
					this.routeList = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .content {
	// 	padding-bottom: 300rpx;
	// }

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		position: relative;

		.search {
			position: absolute;
			bottom: 40rpx;
			right: 30rpx;
			z-index: 2;

			// width: 86%;
			.address {
				font-size: 20rpx;
				color: white;
				text-align: right;
				// margin-right: 20rpx;

				.addressName {
					font-size: 28rpx;
					letter-spacing: 6rpx;
				}
			}
		}

		.swiper {
			height: 430rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.swiper-title {
				position: absolute;
				bottom: 65rpx;
				right: 30rpx;
				// background: rgba(255, 255, 255, 0.5);
				font-size: 22rpx;
				// padding: 5rpx 10rpx;
				border-radius: 20rpx;
				// background: rgba(51, 51, 51, 0.5);
				color: white;
			}
		}
	}

	.swiperLogo {
		position: absolute;
		width: 400rpx;
		// margin-top: 40rpx;
		top: 80rpx;
		left: 50%;
		margin-left: -200rpx;
		z-index: 8;
	}

	.swiper2 {
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.navView {
		background: white;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 48rpx 30rpx 10rpx;
		position: relative;
		top: -20rpx;

		.navs {
			padding: 0;

			.nav-item {
				font-size: 24rpx;
				text-align: center;
				width: 24%;
				margin-bottom: 16rpx;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.banner2 {
			width: 100%;
			display: block;
			margin: 20rpx 0;
		}

		.news {
			padding: 18rpx 20rpx;
			background: #F7FAFC;
			border-radius: 24rpx;

			.news-icon1 {
				width: 64rpx;
				height: 52rpx;
				margin-right: 20rpx;
			}

			.news-icon2 {
				width: 64rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.point {
				background: #333333;
				width: 8rpx;
				height: 8rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.title {
				font-size: 28rpx;
				width: 55%;
			}

			.more {
				color: #878787;
				font-size: 28rpx;
				margin-right: 16rpx;
			}

			.news-icon3 {
				width: 30rpx;
				height: 30rpx;
			}
		}


	}

	.video {
		background: white;
		margin: 0 30rpx;
		// width: 93%;
		position: relative;
		padding-bottom: 20rpx;

		.videoTab {
			position: absolute;
			top: 20rpx;
			left: 18rpx;
			z-index: 9;
			background: #00af91ad;
			color: white;
			font-size: 28rpx;
			padding: 0px 22rpx;
			border-radius: 40rpx;
		}

		video {
			width: 100%;
			background: white;
			height: 388rpx;
			object-fit: cover;
		}

		.icon {
			position: absolute;
			top: 5rpx;
			right: 20rpx;
		}
	}

	.main-list {
		position: relative;
		padding: 30rpx 30rpx 300rpx;

		.list-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
		}

		.list-tit {
			position: relative;
			padding-bottom: 10rpx;
			width: fit-content;

			view {
				color: #00AF91;
				font-size: 38rpx;
				left: 0;
				bottom: 0rpx;
				transition: font-size 0.5s ease
			}

			image {
				position: absolute;
				width: 100%;
				height: 100%;

			}
		}

		.list-tit2 {
			color: #141414;
			font-size: 32rpx;
			position: relative;
			margin-left: 20rpx;
			transition: font-size 0.5s ease // top: 10rpx;
		}

		.list-tit3 {
			color: #141414;
			font-size: 32rpx;
			position: relative;
			transition: font-size 0.5s ease // top: 20rpx;
		}

		@keyframes colorChange {
			0% {
				color: red;
			}

			50% {
				color: blue;
			}

			100% {
				color: green;
			}
		}

		.jingdian {
			margin-top: 20rpx;

			.jing1 {
				width: 336rpx;
				height: 336rpx;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

				.jing1-tit {
					position: absolute;
					left: 64rpx;
					top: 0;

					image {
						width: 209rpx;
						height: 57.33rpx;
					}

					view {
						position: absolute;
						font-size: 32rpx;
						color: white;
						top: 0%;
						left: 42rpx;
					}

				}

				.jing-name {
					position: absolute;
					left: 16rpx;
					bottom: 16rpx;
					color: white;
					font-size: 28rpx;
					padding: 4rpx 16rpx;
					border-radius: 24rpx;
					background: #00000094;
				}
			}

			.jing2 {
				width: 336rpx;

				.jing2-list {
					height: 160rpx;
					position: relative;
					margin-bottom: 10rpx;

					image {
						width: 336rpx;
						height: 100%;
						border-radius: 16rpx;
						display: block;
					}

					view {
						position: absolute;
						left: 32rpx;
						bottom: 20rpx;
						color: white;
						font-size: 28rpx;
						padding: 4rpx 16rpx;
						border-radius: 24rpx;
						background: #00000094;
					}
				}
			}
		}

		.jingdain2 {
			height: 158rpx;
			margin-top: 20rpx;

			.jing1 {
				width: 336rpx;
				height: 100%;
				position: relative;

				.jing-name {
					position: absolute;
					left: 16rpx;
					bottom: 16rpx;
					color: white;
					font-size: 28rpx;
					padding: 4rpx 16rpx;
					border-radius: 24rpx;
					background: #00000094;
				}

				image {
					border-radius: 16rpx;
				}
			}
		}

		.gonglue {
			position: relative;
			// background: white;

			.gongList {
				border-radius: 16rpx;
				width: 336rpx;
				margin-bottom: 20rpx;
				box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;

				.image {
					position: relative;

					image {
						width: 100%;
						height: 372rpx;
						border-radius: 16rpx 16rpx 0 0;
						display: block;
					}

					.name {
						position: absolute;
						left: 16rpx;
						bottom: 16rpx;
						color: white;
						font-size: 24rpx;
						padding: 4rpx 16rpx;
						border-radius: 24rpx;
						background: #00000094;
					}
				}

				.infos {
					border-radius: 0 0 16rpx 16rpx;
					font-size: 28rpx;
					padding: 12rpx 16rpx 16rpx;
					background: white;

					.eye {
						color: #6C7A94;
						font-size: 24rpx;
						margin-top: 12rpx;
						// justify-content: flex-end;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 12rpx;
						}
					}

					.title {
						font-size: 24rpx;

						// align-items: flex-start;
						view {
							overflow: hidden; //超出隐藏
							text-overflow: ellipsis; //溢出用省略号...显示
							display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
							-webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
							-webkit-line-clamp: 1; //表示显示的行数合上面两个属性，表示显示的行数
						}
					}
				}
			}
		}

		.zixunNav {
			margin: 40rpx 0 20rpx;
			height: 60rpx;
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;

			.list-tit,
			.list-tit3,
			.list-tit2 {
				display: inline-block;
			}
		}

		.zixunList {
			overflow-x: auto;
			white-space: nowrap;

			.bookList {
				display: inline-block;
				position: relative;
				margin-right: 20rpx;

				image {
					width: 300rpx;
					height: 288rpx;
					border-radius: 16rpx;
					display: block;
				}

				view {
					position: absolute;
					bottom: 15rpx;
					color: white;
					font-size: 24rpx;
					width: 260rpx;
					white-space: wrap;
					padding: 4rpx 16rpx;
					border-radius: 24rpx;
					background: #00000094;
					overflow: hidden; //超出隐藏
					text-overflow: ellipsis; //溢出用省略号...显示
					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp: 1; //表示显示的行数合上面两个属性，表示显示的行数
				}
			}
		}
	}
</style>